<template>
  <div style="border: 1px solid red; padding: 10px 20px">
    <h3>我是父组件: {{ count }}</h3>
    <!-- <ParentCom :count="count" @update="update" /> -->
    <ParentCom />
  </div>
</template>

<script setup>
import ParentCom from './components/ParentCom.vue';
import { provide, ref } from 'vue';

const count = ref(100);
const updateCount = () => {
  count.value++;
};

// 依赖注入 ----- 组件通信的一种方法 （父子 props + emits（v-model + sync）, $refs, vuex, event-bus, $root, $parent, $children, provide/inject依赖注入）
// 通过依赖注入 完成我们的 跨级组件通信， provide提供数据，inject 注入数据
provide('count', count);
provide('updateCount', updateCount);
</script>
